<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    //4. 将type的值设置为bar
    let mCharts = echarts.init(document.getElementById('echarts'))
    const XDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    const YDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    let option = {
      // 区域缩放器
      dataZoom: [
        {
          // type: 'slider',//下方会出现滑块 缩放
          type: 'slider',
          xAxisIndex: 0
        },
        {
          type: 'slider',//通过鼠标滚动缩放
          yAxisIndex: 0,
          start:50,
          end:100
        }
      ],
      // 边框 表格  控制图表大小和位置的
      grid: {
        show: true,
        // borderWidth:10,
        borderColor: 'teal',
        // left: 50,
        // top: 100,
        // width:300,
        // height:150
      },
      xAxis: {
        type: 'category', //设置为类目轴
        data: XDataArr,
        // position:'top'
        // type: 'value'
      },
      yAxis: {
        type: 'value',
        // tyape: 'category',
        // data: XDataArr
        // position:'right'
      },
      series: [
        {
          name: '语文',
          type: 'bar',//柱状图
          data: YDataArr,
          // 标记
          markPoint: {
            data: [
              {
                type: 'max', name: "最大值"
              }, {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              { type: "average", name: "平均值" }
            ]
          },
          label: {
            // 显示数值
            show: true,
            //数值旋转
            rotate: 60,
            // 标签的位置
            position: 'top'
          },
          // 柱的宽度
          barWidth: '60%',

        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>